<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="price">
        <div class="icon">
          <div class="icons">
            <div class="el-icon-coin"></div>
          </div>
        </div>
        <div class="font">
          <p class="centent">今天收入</p>
          <p class="size">￥{{price}}</p>
        </div>
      </div>
      <div class="user">
        <div class="icon">
          <div class="icons">
            <div class="el-icon-user-solid"></div>
          </div>
        </div>
        <div class="font">
          <p class="centent">用户总量</p>
          <p class="size">{{user}}</p>
        </div>
      </div>
      <div class="order">
        <div class="icon">
          <div class="icons">
            <div class="el-icon-s-order"></div>
          </div>
        </div>
        <div class="font">
          <p class="centent">今日订单</p>
          <p class="size">{{order}}</p>
        </div>
      </div>
      <div class="comments">
        <div class="icon">
          <div class="icons">
            <div class="el-icon-s-promotion"></div>
          </div>
        </div>
        <div class="font">
          <p class="centent">留言总数</p>
          <p class="size">{{comments}}</p>
        </div>
      </div>

      <!-- 2.为Echarts准备一个Dom -->
      <div class="dom">
        <div id="main"></div>
        <div id="myChart"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts' // 引入echarts
import { server } from '../api/index'
export default {
  data() {
    return {
      price: 0,
      user: 0,
      order: 0,
      comments: 0
    }
  },
  created() {
    this.getIndex()
  },
  methods: {
    async getIndex() {
      const { data: res } = await server.getIndex()
      if (res.code !== 200) return this.$message('获取数据失败!')
      this.price = res.data.price
      this.user = res.data.user
      this.order = res.data.order
    }
  },

  async mounted() {
    let myChart = echarts.init(document.getElementById('myChart'), 'light') // 初始化echarts, theme为light

    var myCharts = echarts.init(document.getElementById('main'))

    const { data: res } = await server.getEcharts()
    if (res.code !== 200) return this.$message('获取折线图数据失败!')
    // 4.准备数据项和配置项
    // 指定图表的配置项和数据
    var options = {
      color: ['#33cabb'],
      // title: {
      //   text: '注册用户'
      // },
      tooltip: {},
      legend: {
        data: ['数量']
      },
      xAxis: {
        data: res.data.time
      },
      yAxis: {
        type: 'value',
        name: '用户注册量', // y轴名称
        nameTextStyle: {
          // y轴名称样式
          fontWeight: 600,
          fontSize: 18
        }
      },
      series: [
        {
          name: '用户量',
          type: 'bar',
          data: res.data.number
        }
      ]
    }

    // 5.展示数据
    myCharts.setOption(options)
    var echartsOption = {
      // echarts选项，所有绘图数据和样式都在这里设置

      xAxis: {
        type: 'category',
        data: res.data.times, // x轴数据
        name: '日期', // x轴名称
        nameTextStyle: {
          // x轴名称样式
          fontWeight: 600,
          fontSize: 18
        }
      },
      yAxis: {
        type: 'value',
        name: '营业额', // y轴名称
        nameTextStyle: {
          // y轴名称样式
          fontWeight: 600,
          fontSize: 18
        }
      },
      tooltip: {
        //鼠标放到图上的数据展示样式
        trigger: 'axis'
      },
      series: [
        //每条折线的数据系列

        {
          name: '成交金额',
          data: res.data.price,
          type: 'line'
        }
      ]
    }
    myChart.setOption(echartsOption) // echarts设置选项
  }
}
</script>

<style>
.dom {
  width: 100%;
}
#main {
  width: 48%;
  height: 500px;
  float: left;
}
#myChart {
  width: 50%;
  height: 500px;
  float: left;
}
.price {
  width: 20%;
  background-color: #33cabb;

  color: white;
  border-radius: 10px;
  margin-left: 40px;
  margin-bottom: 30px;
  float: left;
  display: flex;
}
.user {
  width: 20%;
  background-color: #f96868;
  color: white;
  border-radius: 10px;
  margin-left: 40px;
  margin-bottom: 30px;
  float: left;
  display: flex;
}

.order {
  width: 20%;
  background-color: #15c377;
  color: white;
  border-radius: 10px;
  margin-left: 40px;
  margin-bottom: 30px;
  float: left;
  display: flex;
}

.comments {
  width: 20%;
  background-color: #926dde;
  color: white;
  border-radius: 10px;
  margin-left: 40px;
  margin-bottom: 30px;
  float: left;
  display: flex;
}
.icon {
  flex: 2;
  position: relative;
}
.icons {
  position: absolute;
  top: 20%;
  left: 8%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.175);
}
.el-icon-coin {
  position: absolute;
  top: 25%;
  left: 24%;
  font-size: 25px;
  font-weight: bold;
}
.user .el-icon-user-solid {
  position: absolute;
  top: 25%;
  left: 24%;
  font-size: 25px;
}
.order .el-icon-s-order {
  position: absolute;
  top: 25%;
  left: 24%;
  font-size: 25px;
}
.el-icon-s-promotion {
  position: absolute;
  top: 25%;
  left: 24%;
  font-size: 25px;
}
.font {
  flex: 1;
  text-align: center;
}
.centent {
  font-size: 14px;
}
.size {
  font-size: 18px;
  font-weight: bold;
}
</style>
